<template>
	<div>
		<el-table
			:data="student_list"
			border
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
		>
			<el-table-column label="学生姓名" width="150">
				<template #default="scope">
					<el-select v-model="scope.row.student" style="width: 100%" @change="onChange">
						<el-option
							:value="scope.row.student"
							:disabled="true"
							:label="scope.row.name"
							:key="scope.row.student"
						></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="消耗常规课课时" width="120">
				<template #default="scope">
					<el-input-number
						:min="0"
						v-model="scope.row.common_use_num"
						style="width: 100%"
						@change="onChange"
					></el-input-number>
				</template>
			</el-table-column>

			<el-table-column label="消耗特殊课课时" width="120">
				<template #default="scope">
					<el-input-number
						:min="0"
						v-model="scope.row.special_use_num"
						style="width: 100%"
						@change="onChange"
					></el-input-number>
				</template>
			</el-table-column>

			<el-table-column label="课堂评分" width="170">
				<template #default="scope">
					<el-tooltip
						class="item"
						effect="dark"
						content="学生课程表现整体评分"
						placement="top-start"
					>
						<el-rate @change="onChange" v-model="scope.row.rate" allow-half />
					</el-tooltip>
				</template>
			</el-table-column>

			<el-table-column label="课堂评价">
				<template #default="scope">
					<el-input
						@change="onChange"
						type="textarea"
						v-model="scope.row.comments"
					></el-input>
				</template>
			</el-table-column>
			<el-table-column label="备注">
				<template #default="scope">
					<el-input
						@change="onChange"
						type="textarea"
						v-model="scope.row.note"
					></el-input>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="90">
				<template #default="scope">
					<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        > -->
					<!-- <el-tooltip
						class="item"
						effect="dark"
						content="本班学生不可删除，只能删除插班生"
						placement="left-start"
					> -->
						<el-button
							size="mini"
							type="danger"
							@click="delStudent(scope.row.student)"
						>
							删除
						</el-button>
					<!-- </el-tooltip> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- 		
    
    <el-row>
			<el-col :span="3">学生姓名 </el-col>
			<el-col :span="6">消耗课时</el-col>
			<el-col :span="4">是否请假</el-col>
			<el-col :span="4">是否插班</el-col>
			<el-col :span="3">评分</el-col>
			<el-col :span="4">课堂评语</el-col>
		</el-row>
		<el-row v-for="item in student_list" :key="item">
			<el-col :span="3">
				<el-select v-model="item.id" @change="onChange">
					<el-option
						:value="item.id"
						:disabled="true"
						:label="item.name"
						:key="item.id"
					></el-option>
				</el-select>
			</el-col>
			<el-col :span="6">
				<el-input-number @change="onChange" v-model="item.common_use_num" :min="1" :max="10" />
			</el-col>
			<el-col :span="4">
				<el-switch
          @change="onChange"
					v-model="item.isLeave"
					inline-prompt
					active-color="#13ce66"
					inactive-color="#ff4949"
					active-text="是"
					inactive-text="否"
				/>
			</el-col>
			<el-col :span="4">
				<el-switch
          @change="onChange"
					v-model="item.isPlacement"
					inline-prompt
					active-color="#13ce66"
					inactive-color="#ff4949"
					active-text="是"
					inactive-text="否"
				/>
			</el-col>
			<el-col :span="3">
				<el-rate @change="onChange" v-model="item.rate" allow-half />
			</el-col>
			<el-col :span="4">
				<el-input @change="onChange" type="textarea" v-model="item.comments"></el-input>
			</el-col>
		</el-row> -->
	</div>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import { defineComponent, inject, onMounted, ref, watch, computed } from "vue";
import { Check, Close } from "@element-plus/icons";
import { forEach } from "lodash";
export default defineComponent({
	name: "class_students_detail",

	props: {
		modelValue: [String, Number, Array],
		props: Object
	},

	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },
	expose: ["getClassStudentList", "getStudentInfo", "delStudent","resetClassStudentList"],

	emits: ["update:modelValue", "click"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		// const list = ref<any[]>([]);
		console.log(props);

		// 绑定值
		const value = ref("");
		const student_list = ref([]);
		onMounted(() => {
			student_list.value = []
		})
		// 定义课程列表
		

		// 绑定值回调
		function onChange() {
			emit("update:modelValue", student_list.value);
		}


		const getStudentInfo = async function (student) {
			let res = await service.studentService.list({ id: student });
			let lastStudent = res[res.length - 1];
			let flag = false;
			console.log(res,"--------");
			
			if (student_list.value !== undefined) {
				student_list.value.forEach((item) => {
				console.log(item, lastStudent);

				if (item.student === lastStudent.id) {
					flag = true;
					return ElMessage(item.name + "已经在里面了");
				}
			});
			}
			console.log(flag);

			if (flag === false) {
				student_list.value.push({
					student: lastStudent.id,
					name: lastStudent.name,
					common_use_num: 0,
					isLeave: false,
					isPlacement: false,
					special_use_num: 0,
					rate: 0,
					comments: "",
					note: ""
				});
				onChange()
				return false;
			} else {
				return true;
			}
			
		};

		const delStudent = async function (student) {
			student_list.value.forEach((item, index) => {
				if (item.student === student) {
					student_list.value.splice(index, 1);
				}
			});
		};

		// 获取课程数据并绑定到课程列表
		const getClassStudentList = async (classgroupId = null) => {
			student_list.value = [];
			let res = await service.classgroupStudentsService.list({ classgroup_id: classgroupId });
			res.forEach((item) => {
				student_list.value.push({
					student: item.student_id,
					name: item.name,
					common_use_num: 0,
					special_use_num: 0,
					rate: 0,
					comments: "",
					note: ""
				});
			});
			onChange();
		};

		// 重置学生列表
		const resetClassStudentList = () => {
			student_list.value = [];
			onChange();
		};

		// 加载时调用函数
		onMounted(async () => {});

		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				console.log(val);
				if (val instanceof Array) {
					val.forEach((item) => {
						item.isPlacement = Boolean(item.isPlacement);
						item.isLeave = Boolean(item.isLeave);
						item.rate = parseFloat(item.rate);
					});
					console.log(val);
				}
				console.log(val);
				student_list.value = val;
			},
			{
				immediate: true
			}
		);

		// 解析值
		// watch(
		// 	() => props.formDate,
		// 	(val: any) => {
		// 		console.log(val);

		// 		// value.value = val;
		// 	},
		// 	{
		// 		immediate: true
		// 	}
		// );

		// onMounted(async () => {
		// 	console.log(service);

		// 	list.value = await service.studentService.list();
		// 	console.log(list.value);
		// });

		return {
			value,
			onChange,
			value3: ref(),
			value1: ref(),
			value2: ref(),
			num: ref(),
			student_list,
			getClassStudentList,
			resetClassStudentList,
			getStudentInfo,
			delStudent,
			Check,
			Close
		};
	}
});
</script>